<!DOCTYPE html>
<head>
    <title>预约参观</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi">
    <script src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        document.write('<link rel="stylesheet" href="css/style.css?time='+new Date().getTime()+'">');
        document.write('<link rel="stylesheet" href="css/iosSelect.css?time='+new Date().getTime()+'">');
        document.write('<script type="text/javascript" src="js/main.js?time='+new Date().getTime()+'"><\/script>');
        document.write('<script type="text/javascript" src="js/iosSelect.js?time='+new Date().getTime()+'"><\/script>');
    </script>
    <script src="js/zepto.js"></script>
    <!-- <script src="js/iosSelect.js"></script> -->
</head>
<body>
    <div class="box">
        <div class="page1">
            <div class="infoText">
                <form action="" >
                    <div class="infoList">
                        <span class="text">预约人</span>
                        <input type="text" id="name" name="" class="name" placeholder="请输入">
                    </div>
                    <div class="infoList">
                        <span class="text">电话</span>
                        <input type="tel" id="tel" name="" maxlength="11" class="name" placeholder="请输入">
                    </div>
                    <div class="infoList" id="selectDate">
                        <span class="text">参观日期</span>
    					<input type="hidden" id="visit_time" >
                        <div data-year="" data-month="" data-date="" class="showDate" id="showDate">请选择<span class="angle"></span></div>
                    </div>
                </form>
            </div>
            <div class="submit"><a href="#">提交申请</a></div>
        </div>

        <div class="page2" style="display: none;">
            <div class="banner">
                <img id="pic-show" src="images/pic.jpg" alt="">
            </div>
            <div class="infoText">
                <form action="" >
                    <div class="infoList">
                        <span class="text">预约人</span>
                        <div class="sEnd success1"></div>
                    </div>
                    <div class="infoList">
                        <span class="text">预约地址</span>
                        <div class="sEnd success2"></div>
                    </div>
                    <div class="infoList">
                        <span class="text">参观日期</span>
                        <div class="sEnd success3"></div>
                    </div>
                </form>
            </div>
            <div class="again"><a href="/euc/page/wx/space.html">提交新的申请</a></div>
        </div>

        <div class="mask success" style="display: none;">
            <div class="window">
                <h3>提交成功</h3>
                <div class="line"></div>
                <p>您已成功提交于<span id="timer">2017-10-09</span>，桉树IBC中心的预约申请。工作人员会在30分钟内与您进行电话确认，请保持电话畅通。</p>
                <div class="okBtn">好的</div>
            </div>
        </div>
    </div>
<script type="text/javascript">
    var selectDateDom = $('#selectDate');
    var showDateDom = $('#showDate');
    // 初始化时间
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDate = now.getDate();


    showDateDom.attr('data-year', nowYear);
    showDateDom.attr('data-month', nowMonth);
    showDateDom.attr('data-date', nowDate);
    // 数据初始化
    function formatYear (nowYear) {
        var arr = [];
        for (var i = nowYear; i <= nowYear + 5; i++) {
            arr.push({
                id: i + '',
                val: i,
                value: i + '年'
            });
        }
        return arr;
    }
    function formatMonth (curMon) {
        var arr = []; 
		for (var i = curMon; i <= 12; i++) {
            arr.push({
                id: i + '',
                val: i,
                value: i + '月'
            });
        }
        return arr;
    }
    function formatDate (curDay,count) {
        var arr = [];
        for (var i = curDay; i <= count; i++) {
            arr.push({
                id: i + '',
                val: i,
                value: i + '日'
            });
        }
        return arr;
    }
    var yearData = function(callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
            callback(formatYear(nowYear))
        // }, 2000)
    }
    var monthData = function (year, callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
			var curMon=1;
			if(year<=nowYear) curMon=nowMonth;
            callback(formatMonth(curMon));
        // }, 2000);
    };
    var dateData = function (year, month, callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
            var curDay=1;
			if(year<=nowYear && month<=nowMonth) curDay=nowDate;
			if (/^(1|3|5|7|8|10|12)$/.test(month)) {
                callback(formatDate(curDay,31));
            }
            else if (/^(4|6|9|11)$/.test(month)) {
                callback(formatDate(curDay,30));
            }
            else if (/^2$/.test(month)) {
                if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
                    callback(formatDate(curDay,29));
                }
                else {
                    callback(formatDate(curDay,28));
                }
            }
            else {
                throw new Error('month is illegal');
            }
        // }, 2000);
        // ajax请求可以这样写
        /*
        $.ajax({
            type: 'get',
            url: '/example',
            success: function(data) {
                callback(data);
            }
        });
        */
    };
    selectDateDom.bind('click', function () {
        var oneLevelId = showDateDom.attr('data-year');
        var twoLevelId = showDateDom.attr('data-month');
        var threeLevelId = showDateDom.attr('data-date');
        var iosSelect = new IosSelect(3, 
            [yearData, monthData, dateData],
            {
                // title: '地址选择',
                itemHeight: 60,
                oneLevelId: oneLevelId,
                twoLevelId: twoLevelId,
                threeLevelId: threeLevelId,
                showLoading: true,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                    showDateDom.attr('data-year', selectOneObj.id);
                    showDateDom.attr('data-month', selectTwoObj.id);
                    showDateDom.attr('data-date', selectThreeObj.id);
                    showDateDom.html(selectOneObj.value+' '+selectTwoObj.value+' '+selectThreeObj.value);
					$("#visit_time").val( selectOneObj.val+'-'+selectTwoObj.val+'-'+selectThreeObj.val);
                }
        });
    });

    $("#pic-show").attr("src", pic);
    $("#space_name-show").html(space_name);

    $.getJSON("/euc/_space/space_info",{id:space_id},function (ret) {
       if(ret.status == 0){
           $("#pic-show").attr("src", ret.data.displayPicture);
           $(".success2").html(ret.data.spaceName);
       }
    });
</script>
</body>
</html>
